<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.css">
        <!--<script src="js/vendor/modernizr-2.6.2.min.js"></script> -->       
        <!--<script type="text/javascript" src="js/jquery.js"></script>  menu -->
        <!--<script type="text/javascript" src="js/menu.js"></script>   menu -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- slider -->
        <script src="js/jquery.glide.js"></script> <!-- slider -->
        <script type="text/javascript">
         $(document).ready(function(){
          var submitIcon = $('.busca-cat-ico');
          var inputBox = $('.busca-cat-txt');
          var searchBox = $('.busca-cat');
          var isOpen = false;
          submitIcon.click(function(){
           if(isOpen == false){
            searchBox.addClass('busca-cat-open');
            inputBox.focus();
            isOpen = true;
           } else {
            searchBox.removeClass('busca-cat-open');
            inputBox.focusout();
            isOpen = false;
           }
          }); 
          submitIcon.mouseup(function(){
            return false;
           });
           searchBox.mouseup(function(){
            return false;
           });
          $(document).mouseup(function(){
           if(isOpen == true){
            $('.busca-cat-ico').css('display','block');
            submitIcon.click();
            }
        });
         });
         function buttonUp(){
             var inputVal = $('.busca-cat-txt').val();
             inputVal = $.trim(inputVal).length;
             if( inputVal !== 0){
              $('.busca-cat-ico').css('display','none');
             } else {
              $('.busca-cat-txt').val('');
              $('.busca-cat-ico').css('display','block');
             }
            }
         </script>
         <script>
  
                $(function() {

                // grab the initial top offset of the navigation
                var sticky_navigation_offset_top = $('.container-busca-cat').offset().top;
                
                // our function that decides weather the navigation bar should have &quot;fixed&quot; css position or not.
                var sticky_navigation = function(){
                    var scroll_top = $(window).scrollTop(); // our current vertical position from the top
                    var windowWidth = $(window).width(); // largura da tela (para design responsivo)
                    
                    // if we've scrolled more than the navigation, change its position to fixed to stick to top,
                    // otherwise change it back to relative
                    if (scroll_top > sticky_navigation_offset_top && windowWidth < 768 ) {
                      $('#topo-categoria').addClass( "topo-fixo");
                    } else {
                      $('#topo-categoria').removeClass( "topo-fixo" );
                    } 
                    if (windowWidth < 768) {
                      $('#container-page-cat').removeClass("container");
                      $('#topo-categoria').addClass( "search-mobile");
                    } else {
                      $('#container-page-cat').addClass("container");
                      $('#topo-categoria').removeClass( "search-mobile" );
                    } 
                };
                
                // run our function on load
                sticky_navigation();
                
                // and run it again every time you scroll
                $(window).scroll(function() {
                     sticky_navigation();
                });

            });
          </script>
          <!-- fancybox -->
            <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
            <link rel="stylesheet" href="css/jquery.fancybox.css">
            <script type="text/javascript">
            $(document).ready(function() {
                $('.fancybox').fancybox();
              });
            </script>
    </head>
    <body id="page-categoria">
        <!--[if lt IE 7]>
            <p class="browsehappy">Você está usando um browser <strong>ultrapassado</strong>. Por favor <a href="http://browsehappy.com/">atualize seu browser</a> para melhorar sua navegação.</p>
        <![endif]-->

        <header>
            <div id="topo" class="container">
                <a href="#"><img class="logo" src="img/logo.png" /></a>
                <div id="menu-ajuda">
                    <a class="fancybox fancybox.iframe" href="busca.html"><div id="busca-p"></div></a>
                    <div id="busca">
                        <form>
                            <span>
                                <input class="buscar-txt" type="search" name="s" placeholder="O que você procura?">
                                <input class="buscar-btn" type="submit" value="">
                            </span>
                        </form>
                    </div>

                    <div id="contato-duvidas">
                        <a href="#">
                            <div id="contato">
                                <span><img src="img/contato.png" alt="fale conosco"> fale conosco</span>
                            </div>
                        </a>
                        <a href="#">
                            <div id="duvidas">
                                <span><img src="img/duvidas.png" alt="dúvidas e sugestões" /> dúvidas e sugestões</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="banner slider">
                <ul class="slides">
                    <li class="slide"><a href="#"><span class="banner-title">Bem-vindo à sua enciclopédia online sobre a Amazônia</span><img src="img/penas-arara.jpg"/></a></li>
                    <li class="slide"><a href="#"><span class="banner-title">This is a slide.</span><img src="http://placekitten.com/1280/420"/></a></li>
                    <li class="slide"><a href="#"><span class="banner-title">This is a slide.</span><img src="http://placekitten.com/1280/420"/></a></li>
                </ul>
            </div>
        </header>

        <div id="menu-mobile">
            <p class="categoria-title">filtrar por Categoria:</p>
            <div class="select-estilo">
                <select>
                    <option>DESTAQUES</option>
                    <option>TODOS</option>
                    <option>Animais</option>
                    <option>Bibliotecas</option>
                    <option>Biodiversidade</option>
                    <option>Biografias</option>
                    <option>Cidades</option>
                    <option>Culinária</option>
                    <option>Cultura</option>
                    <option>Doenças Tropicais</option>
                    <option>Economia</option>
                    <option>Esportes da Amazônia</option>
                    <option>Estados</option>
                    <option>Folclore</option>
                    <option>Geografia</option>
                    <option>Hinos</option>
                    <option>Lendas</option>
                    <option>Lugares Históricos</option>
                    <option>Mapas e Bandeiras</option>
                    <option>Meio ambiente</option>
                    <option>Museus</option>
                    <option>Objetos</option>
                    <option>Países Amazônicos</option>
                    <option>Paques Nacionais</option>
                    <option>Peixes da Amazônia</option>
                    <option>Política</option>
                    <option>Reservas</option>
                    <option>Turismo</option>
                </select>
            </div>
        </div>

        <div id="superbanner" class="container"></div>

        <div class="container">
            <div id="menu">
                <nav>
                    <p class="categoria-title">filtrar por Categoria:</p>
                    <ul class="menu" id="nav">
                        <li><a href="#"><span class="current">DESTAQUES</span></a></li>
                        <li><a href="#"><span>Animais</span></a></li>
                        <li><a href="#"><span>Bibliotecas</span></a></li>
                        <li><a href="#"><span>Biodiversidade</span></a></li>
                        <li><a href="#"><span>Biografias</span></a></li>
                        <li><a href="#"><span>Cidades</span></a></li>
                        <li><a href="#"><span>Culinária</span></a></li>
                        <li><a href="#"><span>Cultura</span></a></li>
                        <li><a href="#"><span>Doenças Tropicais</span></a></li>
                        <li><a href="#"><span>Economia</span></a></li>
                        <li><a href="#"><span>Esportes da Amazônia</span></a></li>
                        <li><a href="#"><span>Estados</span></a></li>
                        <li><a href="#"><span>Folclore</span></a></li>
                        <li><a href="#"><span>Geografia</span></a></li>
                        <li><a href="#"><span>Hinos</span></a></li>
                        <li><a href="#"><span>Lendas</span></a></li>
                        <li><a href="#"><span>Lugares históricos</span></a></li>
                        <li><a href="#"><span>Mapas e Bandeiras</span></a></li>
                        <li><a href="#"><span>Meio ambiente</span></a></li>
                        <li><a href="#"><span>Museus</span></a></li>
                        <li><a href="#"><span>Objetos</span></a></li>
                        <li><a href="#"><span>Países Amazônicos***</span></a></li>
                        <li><a href="#"><span>Parques Nacionais</span></a></li>
                        <li><a href="#"><span>Peixes da Amazônia</span></a></li>
                        <li><a href="#"><span>Política***</span></a></li>
                        <li><a href="#"><span>Reservas</span></a></li>
                        <li class="last"><a href="#"><span>Turismo</span></a></li>
                    </ul>
                    <img class="grafismo-menu" src="img/grafismo-menu.png">
                </nav>
            </div>

        </div>

        <div id="container-page-cat" class="container">
            <div id="conteudo">
                <div id="categoria">
                    <div id="topo-categoria">
                        <div class="caminhorato">
                            <p class="categoria-title">
                                <a href="#">A-Z</a> &#62; Animais
                            </p>
                        </div>
                        <div class="container-busca-cat">
                             <form class="busca-cat">
                                <input type="text" placeholder="Buscar na categoria..." name="busca-cat" onkeyup="buttonUp();" class="busca-cat-txt" required>
                                <input type="submit" class="busca-cat-btn" value="">
                                <span class="busca-cat-ico"></span>
                            </form>
                        </div>
                    <hr>
                    </div>

                    <div class="bloco-categoria">
                        <ul>
                            <li>
                                <figure>
                                    <div>
                                        <img class="foto-destaque" src="http://placekitten.com/420/420"/>
                                    </div>
                                    <figcaption>
                                        <a href="#">
                                            <div class="noticia-title">
                                                <h3>Nome da notícia seis palavras máximo</h3>
                                            </div>
                                            <div id="cat-mobile">
                                                <div class="ver-mais-mobile"></div>
                                                <hr class="hr-cat-mobile">
                                            </div>
                                            <img class="ver-mais" src="img/mais.png"/>
                                        </a>
                                        <div class="compartilhar">
                                          <a href="#" class="symbol-fb"><span>facebook</span></a>
                                          <a href="#" class="symbol-p"><span>pinterest</span></a>
                                        </div>
                                    </figcaption>
                                </figure>
                            </li>
                            <!-- repetição noticias -->
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                            <li><figure><div><img class="foto-destaque" src="http://placekitten.com/420/420"/></div><figcaption><a href="#">
                                            <div class="noticia-title"><h3>Nome da notícia seis palavras máximo</h3></div>
                                            <div id="cat-mobile"><div class="ver-mais-mobile"></div><hr class="hr-cat-mobile"></div>
                                            <img class="ver-mais" src="img/mais.png"/></a>
                                        <div class="compartilhar"><a href="#" class="symbol-fb"><span>facebook</span></a><a href="#" class="symbol-p"><span>pinterest</span></a></div></figcaption></figure></li>
                        </ul>
                    </div>
                </div>

                <div id="vejatambem">
                    <h2 class="bloco-title">&#187; Conheça também</h2>
                    <hr>
                    <ul>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#"><img src="http://placekitten.com/420/310"></a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#"><img src="http://placekitten.com/420/310"></a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#"><img src="http://placekitten.com/420/310"></a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#"><img src="http://placekitten.com/420/310"></a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="publicidade" class="container"></div>

        <footer>
        </footer>

        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>-->
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script>
            var glide = $('.slider').glide({
                    afterTransition: function() {
                        var currentSlide = this.currentSlide;
                        console.log(currentSlide);
                    }
                }).data('api_glide');

                $(window).on('keyup', function (key) {
                    if (key.keyCode === 13) {
                        glide.jump(3, console.log('Wooo!'));
                    };
                });

                $('.slider-arrow').on('click', function() {
                    console.log(glide.current());
                });
        </script>
    </body>
</html>
